<template>
  			<el-select
					class="width-full"
          v-bind="$attrs"
					:value="value1"
					@change="change">
          <template v-for="one in optionList">
							<el-option
								:key="one.key"
								v-if="!one.isDelete"
								:value="String(one.key)"
								:label="one.value">
							</el-option>
						</template>
				</el-select>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  components: {
  }
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) public item!: any
  @Prop({ default: () => [] }) public optionList!: any[]
  public get splitType () {
    return this.item.fieldType === 'text' ? '&^&' : ','
  }

  public get value1 () {
    const filterValue = this.item.filterValue || ''
    return filterValue ? filterValue.split(this.splitType).filter(item => item) : []
  }

  public change (value) {
    this.item.filterValue = value.join(this.splitType)
    this.$emit('on-change')
  }
}
</script>

<style lang="stylus">
</style>
